<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>订单</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="/css/iconfont.css" rel="stylesheet"/>
    <link href="/css/common.css" rel="stylesheet"/>
    <link href="/css/uc.css" rel="stylesheet"/>
    <link href="/layui/css/layui.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/js/style.css"/>
</head>
<body>
<!--头部-->
<div class="topper">
    <div class="wrapper">
        <div class="left-bar">
            <div class="back-home divider">
                <em></em><a href="/">商城首页</a>
            </div>
        </div>
        <div class="right-bar">
            <div class="login-user sub-menu">
                <a href="/member/page" class="menu-hd" th:text="${session.currentUser.memberName}">
                    <em></em>
                </a>
            </div>
            <div class="logout divider"><a href="/logout">退出</a></div>
            <span class=""></span>
            <div class="cart"><em></em><a href="/cart/page">购物车</a></div>
            <div class="order"><em></em><a href="javascript:;">我的订单</a></div>
        </div>
    </div>
</div>

<!-- 条形头部栏 -->
<div class="uc-header-bg">
    <div class="uc-header wrapper">
        <a class="logo" href="/"><img src="/img/logo-mi.png" style="height: 60px; width: 60px" alt=""/></a>
        <ul class="uc-nav">
            <li><a href="/">首页</a></li>
            <!--      <li id="updatePwd"><a href="javascript:;">修改密码</a></li>-->
        </ul>
    </div>
</div>

<!-- 头部栏下方 -->
<div class="wrapper uc-router">
    <ul>
        <li><a href="/">首页</a></li>
        <li><span class="divider"></span></li>
        <li><span>我的订单</span></li>
    </ul>
</div>

<!-- 详细信息 -->
<div class="wrapper">
    <div class="uc-main clearfix">
        <!-- 左侧选项 -->
        <div class="uc-aside">
            <div class="uc-menu">
                <div class="tit">个人中心</div>
                <ul class="sublist">
                    <li><a href="/member/page">我的资料</a></li>
                </ul>
                <div class="tit">账户中心</div>
                <ul class="sublist">
                    <li><a href="/address/page">收货地址</a></li>
                </ul>
            </div>
        </div>
        <!-- 右侧订单列表 -->
        <div class="uc-content">
            <div class="uc-panel">
                <div class="uc-bigtit">我的订单</div>
                <div class="uc-panel-bd">
                    <div class="uc-sort">
                        <div class="uc-tabs">
                            <a id="order1" class="item active" href="javascript:;">所有订单</a>
                            <a id="order2" class="item" href="javascript:;">待付款</a>
                            <a id="order3" class="item" href="javascript:;">待发货</a>
                            <a id="order4" class="item" href="javascript:;">待收货</a>
                            <a id="order5" class="item" href="javascript:;">待评价</a>
                        </div>
                        <div class="uc-search">
                            <form action="">
                                <input type="text" class="sch-input" id="searchInput" placeholder="输入商品名称,订单号，商品编号"/>
                                <a href="javascript:;" class="sch-btn" id="sch-Btn"><i class="iconfont icon-search"></i></a>
                            </form>
                        </div>
                    </div>
                    <table class="uc-table">
                        <thead>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th width="120"></th>
                        </thead>
                        <tr id="orderLI">
                            <!--<div th:each="order: ${allOrder}">
                              <tr class="hd order-meta">
                                <td colspan="4">
                                  <div class="left"><span th:text="${order.createTime}"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单号:
                                    <span th:text="${order.code}"></span></div>
                                  <div class="right">店铺：<a href="">小米旗舰店</a> <span class="del iconfont icon-shanchu"></span>
                                  </div>
                                </td>
                              </tr>
                              <tr class="order-goods" th:each="p: ${order.carts}">
                                <td>
                                  <div class="goods-info">
                                    <img class="figure" th:src="${p.imgPath}" alt=""/>
                                    <a class="text-info refund" href="uc-apply-refund.html">申请退货</a>
                                    <div class="info">
                                      <div><span th:text="${p.productName}"></span></div>
                                      <div><span th:text="${p.oldPrice}"></span>×<span th:text="${p.amount}"></span></div>
                                    </div>
                                  </div>
                                </td>
                                <td>
                                  金额：<span class="text-theme fwb" th:text="${p.oldPrice} * ${p.amount}"></span>
                                </td>
                                <td>
                                  <span class="status">快件已签收</span><br/>
                                  <a class="text-info" href="uc-order-detail.html">订单详情</a><br/>
                                  <a class="text-info" href="">查看物流</a>
                                </td>
                                <td>
                                  <a href="" class="ui-btn-theme uc-btn-md">追加评论</a>
                                </td>
                              </tr>
                            </div>-->
                        </tr>
                    </table>
                    <div id="pageDIV">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--脚部-->
<div class="fatfooter"></div>
</body>

<!-- 引入js文件 -->
<script src="/js/jquery.js"></script>
<script src="/js/icheck.min.js"></script>
<script src="/layui/layui.js"></script>

<!-- 订单展示模板 -->
<script id="orderTemplate" type="text/html">
    {{#  layui.each(d, function(index, item){  }}
    <tr style="border: 5px solid #3a9ed5;">
    <tr class="hd order-meta">
        <td colSpan="4">
            <div class="left"><span>{{=item.createTime}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单号:&nbsp;&nbsp;<span>{{=item.code}}</span>
            </div>
            <input type="hidden" value="{{=item.id}}">
            <div class="right">店铺：<a href="javascript:;">小米旗舰店</a>
                <span class="del iconfont icon-shanchu deleteOrder"></span>
            </div>
        </td>
    </tr>
    {{#  layui.each(item.orderDetailVOS, function(i, v){  }}
    <tr class="order-goods">
        <td>
            <div class="goods-info">
                <img class="figure" src={{=v.imgPath}} style="height: 60px; width: 60px" alt=""/>
                {{# if(item.status == '1'){ }}
                <a class="text-info refund" href="javascript:;">修改订单</a>
                {{# } }}
                {{# if(item.status == '0'){ }}
                <a class="text-info refund" href="javascript:;">修改地址</a>
                {{# } }}
                {{# if(item.status == '3'){ }}
                <a class="text-info refund" href="javascript:;">申请拦截</a>
                {{# } }}
                {{# if(item.status == '4'){ }}
                <a class="text-info refund" href="javascript:;">申请退货</a>
                {{# } }}
                <div class="info">
                    <div><span>{{=v.name}}</span></div>
                    <div><span>{{=v.oldPrice}}</span>×<span>{{=v.amount}}</span></div>
                </div>
            </div>
        </td>
        <td>
            金额：<span class="text-theme fwb">{{=v.oldPrice * v.amount}}</span>
        </td>
        {{# if(v.flag == '111'){ }}
        <td>
            <a class="text-info" href="javascript:;">订单详情</a><br/>
            {{# if(item.status == '1'){ }}
            <a class="text-info" href="javascript:;">选择支付方式</a>
            {{# } }}
            {{# if(item.status == '0'){ }}
            <a class="text-info" href="javascript:;">联系商家</a>
            {{# } }}
            {{# if(item.status == '3'){ }}
            <a class="text-info" href="javascript:;">查看物流</a>
            {{# } }}
            {{# if(item.status == '4'){ }}
            <a class="text-info" href="javascript:;">查看评价</a>
            {{# } }}
        </td>
        <td>
            <input type="hidden" value="{{=item.id}}">
            {{# if(item.status == '1'){ }}
            <a href="javascript:;" class="ui-btn-theme uc-btn-md"><span class="toPay">去支付</span></a>
            {{# } }}
            {{# if(item.status == '0'){ }}
            <a href="javascript:;" class="ui-btn-theme uc-btn-md"><span class="toMaker">催发货</span></a>
            {{# } }}
            {{# if(item.status == '3'){ }}
            <a href="javascript:;" class="ui-btn-theme uc-btn-md"><span class="toConfirm">确认收货</span></a>
            {{# } }}
            {{# if(item.status == '4'){ }}
            <a href="javascript:;" class="ui-btn-theme uc-btn-md"><span class="toComment">追加评论</span></a>
            {{# } }}
        </td>
        {{# } }}
    </tr>
    {{#  })  }}
    </tr>
    {{#  })  }}
</script>

<script>
    layui.use(["layer", "laytpl", "form", "upload", "laypage"], function () {
        let laypage = layui.laypage,
            laytpl = layui.laytpl,
            $ = layui.jquery;

        let limit = 5; //默认每页5条
        let page = 1; //默认打开第一页

        let send = function (statuses, keyword, page, limit) {
            $.get("/order/myOrdersList?&status=" + statuses + "&keyword=" + keyword + "&page=" + page + "&limit=" + limit, function (resultVo) {
                console.log(resultVo);
                laytpl($("#orderTemplate").html()).render(resultVo.data, function (a) {
                    $("#orderLI").html(a);
                })

                laypage.render({
                    elem: "pageDIV",
                    count: resultVo.count,
                    curr: page,
                    limit: limit,
                    prev: "<",
                    next: ">",
                    jump: function (obj, first) {
                        if (!first) {
                            /*console.log(obj.curr);*/
                            page = obj.curr;
                            send('', '', page, limit);
                            //$("#sch-Btn").click();
                        }
                    }
                })
            })
        }

        $("#sch-Btn").on("click", function () {
            let keyword = $("#searchInput").val()
            send('', keyword, page, limit)
        })

        $("#sch-Btn").click();

        //所有
        $("#order1").on("click", function () {
            $(".item").removeClass("active");
            $("#order1").addClass("active");
            let keyword = $("#searchInput").val()
            send('', keyword, page, limit)
        });
        //待付款
        $("#order2").on("click", function () {
            $(".item").removeClass("active");
            $("#order2").addClass("active");
            let keyword = $("#searchInput").val()
            send(1, keyword, page, limit)
        });
        //待发货
        $("#order3").on("click", function () {
            $(".item").removeClass("active");
            $("#order3").addClass("active");
            let keyword = $("#searchInput").val()
            send(0, keyword, page, limit)
        });
        //待收货
        $("#order4").on("click", function () {
            $(".item").removeClass("active");
            $("#order4").addClass("active");
            let keyword = $("#searchInput").val()
            send(3, keyword, page, limit)
        });
        //待评价
        $("#order5").on("click", function () {
            $(".item").removeClass("active");
            $("#order5").addClass("active");
            let keyword = $("#searchInput").val()
            send(4, keyword, page, limit)
        });

        let updateStatus = function (orderId, statuses, sta, keyword) {
            console.log("111")
            $.post("/myOrders/updateStatus/" + orderId + "/" + statuses, function (resultVo) {
                if (resultVo.code === 200) {
                    layer.msg(resultVo.msg);
                    send(sta, keyword, page, limit)
                }
            })
        }

        $('body').on('click', '.toPay', function () {
            let orderId = $(this).parent().parent().find("input").val();
            console.log(orderId);
            let keyword = $("#searchInput").val()
            updateStatus(orderId, "1", '0', keyword)
        })

        $('body').on('click', '.toMaker', function () {
            let orderId = $(this).parent().parent().find("input").val();
            console.log(orderId);
            let keyword = $("#searchInput").val()
            updateStatus(orderId, "2", '1', keyword)
        })

        $('body').on('click', '.toConfirm', function () {
            let orderId = $(this).parent().parent().find("input").val();
            console.log(orderId);
            let keyword = $("#searchInput").val()
            updateStatus(orderId, "3", '2', keyword)
        })

        $('body').on('click', '.toComment', function () {
            let orderId = $(this).parent().parent().find("input").val();
            console.log(orderId);
            let keyword = $("#searchInput").val()
            updateStatus(orderId, "3", '3', keyword)
        })

        $('body').on('click', '.deleteOrder', function () {
            console.log("111")
            let orderId = $(this).parent().parent().find("input").val();
            $.post("/myOrders/deleteOrder/" + orderId, function (resultVo) {
                if (resultVo.code === 200) {
                    layer.msg(resultVo.msg);
                    let keyword = $("#searchInput").val()
                    send('', keyword, page, limit)
                }
            })
        })

    });
</script>
</html>